layui.define(['table', 'jquery', 'element'], function(exports) {
    "use strict";

    var MOD_NAME = 'message',
        $ = layui.jquery,
        element = layui.element;
    //加载组件所需样式
    layui.link(layui.cache.base + 'message/message.css');
    var message = function (opt) {
        this.option = opt;
    };

    message.prototype.render = function(opt) {
        //默认配置值
        var option = {
            elem: opt.elem,
            url: opt.url ? opt.url : false,
            height: opt.height,
            data: opt.data
        }
        if (option.url != false) {
            option.data = getData(option.url);
            var notice = createHtml(option);
            $(option.elem).html(notice);
        }
        setTimeout(function() {
            element.init();
            $(opt.elem + " li").click(function(e) {
                $(this).siblings().removeClass('xy-this');
                $(this).addClass('xy-this');
            })
        }, 300);
        return new message(option);
    }

    message.prototype.click = function(callback) {
        $("*[notice-id]").click(function(event) {
            event.preventDefault();
            var id = $(this).attr("notice-id");
            var title = $(this).attr("notice-title");
            var context = $(this).attr("notice-context");
            var form = $(this).attr("notice-form");
            callback(id, title, context, form);
        })
    }

    /** 同 步 请 求 获 取 数 据 */
    function getData(url) {
        $.ajaxSettings.async = false;
        var data = null;
        $.get(url, function(result) {
            data = result.data;
        });
        $.ajaxSettings.async = true;
        return data;
    }

    function createHtml(option) {
        var count = 0;
        var noticeTitle = '<ul class="layui-tab-title">';
        var noticeContent = '<div class="layui-tab-content" style="height:' + option.height + ';overflow-x: hidden;">';
        // 根据 data 便利数据
        $.each(option.data, function(i, item) {
            if (i === 0) {
                noticeTitle += '<li class="xy-this">' + item.title + '</li>';
                noticeContent += '<div class="layui-tab-item layui-show">';
            } else {
                noticeTitle += '<li>' + item.title + '</li>';
                noticeContent += '<div class="layui-tab-item">';
            }

            $.each(item.children, function(i, note) {
                var str = "'"+encodeURI(JSON.stringify(note))+"'";
                noticeContent += '<div class="xy-notice-item" onclick="messageClick('+str+')" notice-form="' + note.createName + '" notice-context="' + note.content +'" notice-title="' + note.title + '" notice-id="' + note.id + '">' +
                    '<img src="' +layui.cache.base + 'message/images/message.png"/>' ;
                if (note.title.length>9){
                    noticeContent +=   '<div style="display:inline-block;cursor: pointer; " lay-tips="'+note.title+'">' + note.title.substring(0,8) +"..."+ '</div>';
                }else {
                    noticeContent +=   '<div style="display:inline-block;cursor: pointer;" lay-tips="'+note.title+'">' + note.title + '</div>';
                }
                noticeContent +=  '<div class="xy-notice-end">' + note.createTime + '</div>' +
                    '</div>';
            })
            noticeContent += '</div>';
        })

        var notice =
            '<a href="#" class="notice layui-icon layui-icon-notice"><span class="layui-badge-dot"></div></a>' +
            '<div class="layui-nav-child layui-tab xy-notice" style="margin-top: 0px;;left: -200px;">';
        noticeTitle += '</ul>';
        noticeContent += '</div>';
        notice += noticeTitle;
        notice += noticeContent;
        notice += '</div>';
        return notice;
    }
    exports(MOD_NAME, new message());
});
/*点击事件*/
function messageClick(obj){
    var data = JSON.parse(decodeURI(obj));
    layui.notice.info({title:data.title,message:data.content});
}
